<template>
<div>
  <el-table :data="fenyeList" height="450" style="width: 100%;" :row-class-name="tableRowClassName"
    :header-cell-style="{ background: '#8cc5ff' }" :default-sort = "{prop: 'date', order: 'descending'}">
    <el-table-column prop="vbillcode" label="采购入库单据号" width="180">
    </el-table-column>
    <el-table-column prop="crowno" label="行号" width="80">
    </el-table-column>
    <el-table-column prop="cwarehouse_name" label="库房名称">
    </el-table-column>
    <el-table-column prop="sto_unit_id" label="货位号">
    </el-table-column>
    <el-table-column prop="vbatchcode" sortable label="批号">
    </el-table-column>
    <el-table-column prop="code" label="商品编码">
    </el-table-column>
    <el-table-column prop="name" label="商品名称">
    </el-table-column>
    <el-table-column prop="materialspec" label="商品规格">
    </el-table-column>
    <el-table-column prop="vvendbatchcode" label="供应商批号">
    </el-table-column>
    <el-table-column prop="customer_name" label="客户名称">
    </el-table-column>
    <el-table-column prop="sku_num" label="数量">
    </el-table-column>
  </el-table>
  <el-pagination background layout=" total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize"
    :page-sizes="[10, 20, 50,100]" :total="total">
  </el-pagination>
</div>
</template>

<script>
export default {
  data() {
    return {
      pageNum:1,
      pageSize:10,
      total:0,
      tableData: []
    }
  },
  computed: {
    // 根据当前页码和每页条数计算当前页的数据
    fenyeList() {
      const startIndex = (this.pageNum - 1) * this.pageSize;
      return this.tableData.slice(startIndex, startIndex + this.pageSize);
    }
  },
  watch: {
    tableList(newData) {
      this.tableData = newData;
      this.total = newData.length;
    }
  },
  props:['tableList'],
  methods: {
   //分页
   handleSizeChange(newsize) {
     this.pageNum = 1
     this.pageSize = newsize
   },
   handleCurrentChange(newpage) {
     this.pageNum = newpage
   },
   tableRowClassName({
     row,
     rowIndex
   }) {
     return rowIndex % 2 === 0 ? 'warning-row' : 'success-row';
   }
  },
}
</script>
<style scoped>
  /deep/.el-table .warning-row {
    background: #e6f7ff;
  }

   /deep/.el-table .success-row {
    background: ##E0F8E0;
  }
.el-pagination {
  float: right;
  margin: 20px;
}
</style>
